<template>
    <div class="single-table-container">
        <div class="search-form-wrapper">
            <div class="title">菜单管理</div>
            <div class="seach_list">
                <el-input :prefix-icon="Search" placeholder="菜单名称" v-model="searchForm.name" clearable></el-input>
                <el-select v-model="searchForm.status" placeholder="请选择" clearable>
                    <el-option v-for="item in statusOptions" :key="item.dictValue" :label="item.dictLabel"
                        :value="item.dictValue">
                    </el-option>
                </el-select>
                <el-button type="primary" @click="searchTable">查询</el-button>
                <el-button type="primary" plain @click="addClick">新增</el-button>
            </div>
        </div>
        <div class="single-table">
            <el-table ref="table" v-loading="tableLoading" height="100%" :data="tableData" stripe tooltip-effect="dark"
                :header-cell-style="{ background: '#f5f7fa', fontWeight: 'bold', color: '#303133' }"
                :tree-props="tableTreeProps" row-key="id" highlight-current-row border default-expand-all>
                <el-table-column type="index" header-align="center" align="center" label="序号"
                    width="60"></el-table-column>
                <el-table-column prop="name" label="菜单名称" show-overflow-tooltip></el-table-column>
                <el-table-column prop="url" label="菜单URL" show-overflow-tooltip></el-table-column>
                <el-table-column prop="permissions" label="权限编码" show-overflow-tooltip></el-table-column>
                <el-table-column prop="menuType" label="类型" show-overflow-tooltip
                    :formatter="tableformatterMenuType"></el-table-column>
                <el-table-column prop="icon" label="菜单图标" show-overflow-tooltip></el-table-column>
                <el-table-column prop="status" label="状态" show-overflow-tooltip :formatter="tableformatterStatus">
                </el-table-column>
                <el-table-column prop="sort" label="排序号" show-overflow-tooltip></el-table-column>
                <el-table-column prop="createDate" label="创建时间" show-overflow-tooltip
                    :formatter="formartDateEmpty"></el-table-column>
                <el-table-column label="操作" header-align="center" align="center" width="180">
                    <template #default="scope">
                        <el-button size="small" type="primary" link @click="editRow(scope.row)">编辑</el-button>
                        <el-button size="small" class="g-red" type="primary" link
                            @click="deleteRow(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <addOrEditMenu ref="addOrEditMenuRef" @search-table="searchTable"></addOrEditMenu>
    </div>

</template>
<script setup lang="ts" name="sysMenu">
import { Search } from '@element-plus/icons-vue'
import { delNullProperty } from "@/utils/index.ts";
import { ref, onMounted, computed, h } from 'vue';
import { getMenuList, removeMenuById } from "@/api/sys/menuApi.ts";
import { formartDateEmpty } from "@/utils";
import addOrEditMenu from "./_compoents/addOrEditMenu.vue";
import { ElMessage, ElMessageBox } from 'element-plus'
import useAppStore from '@/stores/modules/app';
const menuTypeOptions = computed(() => useAppStore().sysDict.sys_menu_type || [])
const statusOptions = computed(() => useAppStore().sysDict.sys_status || [])

const addOrEditMenuRef = ref(addOrEditMenu);
const searchForm = ref({
    name: '',
    status: '',
});
const tableLoading = ref(false);
const tableData = ref([]);
const tableTreeProps = {
    children: 'children',
}

/*方法 */
const addClick = () => {
    // 新增
    addOrEditMenuRef.value.openLoad("add");
}
const editRow = (row: any) => {
    addOrEditMenuRef.value.openLoad("update", row);
}
const deleteRow = async (row: any) => {
    ElMessageBox.confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(async () => {
        await deleteRowAction(row);
    })

}
const deleteRowAction = async (row: any) => {
    const id = row.id;
    tableLoading.value = true;
    const res: apiServerResponse = await removeMenuById(id)
    if (res.code == 200) {
        ElMessage({
            message: '删除成功',
            type: 'success',
        })
        searchTable();
    }
    tableLoading.value = false;
}
const getTableData = () => {
    tableLoading.value = true;
    let params = {
        ...delNullProperty(searchForm.value)
    }
    getMenuList(params).then((res: any) => {
        if (res.code == 200) {
            tableData.value = res.result;
        }
        tableLoading.value = false;

    })
}
const searchTable = () => {
    getTableData();
}
const tableformatterMenuType = (row: SysMenuEntity) => {
    if (!row.menuType) {
        return '-';
    }
    return menuTypeOptions.value?.find((item: SysDictDataEntity) => item.dictValue == row.menuType)?.dictLabel
}
const tableformatterStatus = (row: SysUserEntity) => {
    if (!row.status) {
        return '-';
    }
    const label = statusOptions.value?.find((item: SysDictDataEntity) => item.dictValue == row.status)?.dictLabel
    const success = 'el-tag el-tag--success el-tag--small el-tag--light'
    const danger = 'el-tag el-tag--danger el-tag--small el-tag--light'

    return h('span', { class: row.status == '1' ? success : danger },
        h('span', { class: 'el-tag__content' }, label));
}

/*生命周期 */
onMounted(() => {
    getTableData();
})

</script>